<!-- 2023年520活动弹窗组件 -->
<!-- XXX 已弃用，考虑删除 -->
<template>
  <uni-popup
    ref="popup"
    class="popup"
    @change="popupChange"
  >
    <div class="container">
      <img
        class="bg"
        src="/static/images/popup-520.png"
        @click="closePopup"
      >
      <button
        class="btn"
        @click="clickPopup520Btn"
      >
        立即抽奖
      </button>
    </div>
  </uni-popup>
</template>

<script lang="ts" setup>
import { onLoad } from '@dcloudio/uni-app';
import { getCurrentInstance } from 'vue';
import { activity520EndTime, activity520StartTime } from '@/static/constant/lottery-constant';
import { useLottery } from '@/stores/lottery';
import { get520PopupDay, set520PopupDay } from '@/utils/local-data';

/** lottery仓库 */
const lotteryStore = useLottery();

// 组件实例
const instance = getCurrentInstance();

/** 打开弹窗 */
const openPopup = () => {
  const popup520 = instance?.refs?.popup;
  popup520?.open();
};

/** 关闭弹窗 */
const closePopup = () => {
  const popup520 = instance?.refs?.popup;
  popup520?.close();
};

// 监听页面加载，判断是否显示弹窗
onLoad((options: any) => {
  // XXX 暂时使用延时，以防止抽奖页面还有其他弹窗要弹出，正常流程应该是先让抽奖页面的后端请求完成，再判断是否有其他弹窗
  setTimeout(() => {
    // 判断抽奖页面是否有其他弹窗，如果有，就不弹出该弹窗
    const { popupType } = lotteryStore;
    if (popupType != 'no') return;

    // 判断是否还在活动时间内，如果不在活动时间内，就不显示弹窗
    const now = new Date().getTime();
    if (now < new Date(activity520StartTime).getTime() || now > new Date(activity520EndTime).getTime()) return;

    // 判断是否已经在别的小程序弹出过弹窗，如果已经弹出过，就不再弹出
    if (options.alreadyPopup520 === 'true') {
      console.log('test');
      set520PopupDay();
      return;
    }

    // 再判断今天是否已经弹出过弹窗，如果已经弹出过，就不再弹出
    const isPopup = new Date().getDate() === get520PopupDay();
    if (isPopup) return;

    openPopup();
    set520PopupDay();
  }, 1000);
});

/** 点击520弹窗中的「立即抽奖」按钮 */
const clickPopup520Btn = () => {
  const popup = instance?.refs?.popup;
  popup?.close();
  console.log('click', popup);
  uni.switchTab({ url: '/pages/lottery/lottery' });
};

// 监听弹窗状态改变
const popupChange = (e: any) => {
  console.log('popupChange', e);
  // 如果显示就隐藏tabbar
  if (e.show) {
    uni.hideTabBar();
  } else {
    // 显示tabbar
    uni.showTabBar();
  }
};
</script>

<style lang="scss" scoped>
.popup {
  z-index: 9999;

  .container {
    position: relative;

    width: 79.4872vw;
    height: 149.7436vw;

    .bg {
      position: absolute;
      top: 0;
      left: 0;

      width: 100%;
      height: 100%;
    }

    .btn {
      position: absolute;
      bottom: 17px;
      left: 50%;

      width: 208px;
      height: 48px;

      background: linear-gradient(103deg, #ff825e 0%, #ff6c87 100%, #f24ebd 100%);
      border-radius: 46px;

      transform: translateX(-50%);

      font-size: 17px;
      font-weight: 600;
      color: #fff;
    }
  }
}
</style>
